<template>
  <view class="container">

    <custom-nav title="我的会员卡"></custom-nav>

    <template v-if="!isLoading">
      <template v-if="cardList?.length">
        <view class="content">
          <scroll-view style="height: 100%" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresh" refresher-background="transparent" :refresher-threshold="100"
            scroll-with-animation="true" @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="onLower">

            <view class="member-title">会员卡<text class="member-count">（{{total}}张）</text></view>
            <member-card v-for="(item, index) in cardList" :key="index" :info="item"></member-card>

            <!-- 加载更多 -->
            <custom-load :status="loadStatus" v-if="total"></custom-load>
          </scroll-view>
        </view>

        <view class="member-bottom">
          <view class="m-btn" @click="toBuy"><custom-btn>去购买</custom-btn></view>
        </view>
      </template>

      <view style="padding-top: 200rpx" v-else>
        <custom-empty :empty-info="emptyInfo" @click="toBuy"></custom-empty>
      </view>
    </template>
  </view>
</template>

<script setup>
import MemberCard from "./components/member-card.vue";
import { fetchOrderList } from "@/api/my";
const emptyInfo = shallowReactive({
  title: "你还没有完美繁花会员卡哦",
  tips: "可以去会员卡看看",
  btnText: "去购买",
});

const cardList = ref([]);
const isRefresh = ref(false);
const total = ref(null);
const loadStatus = ref("");
const isLoading = ref(true);

const toBuy = () => {
  uni.navigateTo({ url: "/subPages/purchase/index" });
};
const filterQuery = reactive({
  page: 1,
  limit: 10,
});
const onRestore = () => {
  uni.showToast({
    title: "刷新成功~",
    icon: "none",
  });
};
const onRefresh = () => {
  filterQuery.page = 1;
  isRefresh.value = true;
  getList(true);
};

const onLower = () => {
  loadStatus.value = "loading";
  ++filterQuery.page;

  getList(false);
};

const getList = async (refresh = true) => {
  try {
    const { data } = await fetchOrderList(filterQuery);
    const { data: rows } = data.orderInfo;
    isRefresh.value = false;

    total.value = data.orderInfo?.total;
    cardList.value = refresh ? rows : cardList.value.concat(rows);
    if (cardList.value.length >= total.value) {
      loadStatus.value = "nomore";
    }

    isLoading.value = false;
  } catch (error) {
    isRefresh.value = false;
    isLoading.value = false;
  }
};

onShow(() => {
  filterQuery.page = 1;
  getList();
});
</script>

<style lang=scss scoped>
@import "@/styles/global.scss";
.content {
  padding: 40rpx 30rpx 0;
}
.member-bottom {
  background: #fff;
  box-shadow: 0rpx -10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
  padding: 40rpx 50rpx 128rpx;
  position: relative;
  .m-btn {
    width: 650rpx;
    height: 120rpx;
    line-height: 120rpx;
    font-weight: 800;
    font-size: 36rpx;
    color: #fff;
    background: linear-gradient(180deg, rgba(241, 55, 64, 0.9) 0%, #f13740 100%);
    box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(241, 55, 64, 0.25);
    border-radius: 120rpx;
  }
}

.member-title {
  font-size: 40rpx;
  color: #000;
  font-weight: 600;
  .member-count {
    font-size: 28rpx;
    color: #666;
  }
}
</style>